<template>

  <div class="content">
    <nav-title title="欢迎您加入奥克斯" :notback="false"/>
    <div class="login-box">
      <div class="welcome-img" />
      <div class="login-inputBox">
        <div><span>*</span>请输入身份证件号码</div>
        <input type="text" v-model="nationalId" placeholder="输入身份证号码">
        <div><span>*</span>请输入姓名</div>
        <input type="text" v-model="name" placeholder="输入姓名">
      </div>
      <button @click="toLogin">提交</button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Exif from './exif.js'
  import {newEntry, getQrmsg} from '../../api/api'
  import { json2Form } from '../../util/http'
  export default {
    name: "information-login",
    data() {
      return {
        nationalId:'',
        name:''
      }
    },

    methods: {
      toLogin() {
        if(!this.nationalId || !this.name) {
          this.$vux.alert.show({
            title: '提示',
            content: "请填写身份证号和姓名",
          })
          return;
        } else if(this.name.length <= 1){
           this.$vux.alert.show({
            title: '提示',
            content: "请输入正确的姓名",
          })
          return;
        }
        else {
          var that = this;
          newEntry(json2Form({
            nationalId: this.nationalId,
            name: this.name
          })).then(res => {
            if(res && res.retCode === '000000'){
              that.$store.commit('updateHid', {
                hid: res.retData.rsHireId,
                name: res.retData.name
              })
              that.$router.push({
                path: '/hireEnter',
                replace: true
              })
            } else {
              that.$vux.alert.show({
                title: '提示',
                content: res.retMsg,
              })
            }
          })
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .content {
    .login-box{
      .welcome-img{
        width: 100%;
        padding-bottom: 70%;
        background: url(./image/u36.png) no-repeat center;
        background-size: 100% 100%;
        border-bottom: 1px solid #ddd;
      }
      .login-inputBox {
        padding: 15px 20px;
        >div {
          margin: 10px;
          color: #000000;
          font-size: 16px;
          float: left;
          >span{
            color: red;
          }
        }
        >input{
          border: 1px solid #50affc;
          line-height: 37px;
          width: 100%;
          font-size: 18px;
          padding-left: 20px;
        }
      }
      >button{
        background-color: #1c92f5;
        width: 80%;
        height: 37px;
        font-size: 18px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 20px;
        margin: 30px 0;
      }
      .infor-region{
        >div{
          line-height: 80px;
          width: 100%;
          box-sizing: border-box;
          text-align: left;
          color: #000000;
          border-bottom: 1px solid #aaaaaa;
          &::before{
            content: " ";
            float: left;
            width: 80px;
            padding-bottom: 80px;
            background: url(./image/u29.png) no-repeat center;
            background-size: 50px 50px;
            background-color: #1c92f5;
            border-radius: 50px;
          }
          &::after{
            content: " ";
            float: right;
            width: 40px;
            padding-bottom: 80px;
            background: url(./image/u252.png) no-repeat center;
            background-size: 20px 20px;
          }
        }
      }
      .enterInfo{
        font-size:1.5em;
        margin-top:100px;
      }
    }
    
  }
</style>
